﻿

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>多个组件的过渡</title>
		<script src="vue.js"></script>
<style type="text/css">
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
</style>
    </head>
    <body class="docs">
进入/离开 & 列表过渡 — Vue.js<br />
https://cn.vuejs.org/v2/guide/transitions.html<br />
<div id="app">
	<input type="radio" name="view" v-for="(item,index) in list" :value="item.value" v-model="view">

	<transition name="component-fade" mode="out-in">
	  <component v-bind:is="view"></component>
	</transition>
</div>

    </body>

<script type="text/javascript">

var app = new Vue({
  el: '#app',
  data: {
    view: 'v-a',
	//list:['v-a','v-b']
	list:[
	    {value:'v-a',text:'A'},
        {value:'v-b',text:'Component B'},
        {value:'v-c',text:'Component C'}
    ]
  },
  components: {
    'v-a': {
      template: '<div>Component A Component A<br />Component A<br />Component A<br />Component A<br /></div>'
    },
    'v-b': {
      template: '<div>Component B<br />Component B<br />Component B<br />Component B<br />Component B<br /></div>'
    }
  },
    methods:{
      changeComponent:function (e) {

      }
    }
})

</script>

</html>
